<template>
    <div :class="type === 1 ? 'level_type_1 level' : 'level_type_2 level'">
        <div :class="
            type === 1 ? 'back_type_1 header_center' : 'back_type_2 header_center'
        ">
            <HeaderComponent class="header_" background="#00000000" color="#000000" image_="1"
                size="4.8vw">
                <template v-slot:taber_tab>
                    <div class="table_tab">
                        <div @click="levepage(1)" :class="type === 1 ? 'active' : ''">
                            财富等级
                            <div class="line" v-if="type === 1"></div>
                        </div>
                        <div @click="levepage(2)" :class="type === 2 ? 'active' : ''">
                            魅力等级
                            <div class="line" v-if="type === 2"></div>
                        </div>
                    </div>
                </template>
            </HeaderComponent>
            <div class="center_list">
                <div class="wealth">
                    <div class="userIfon">
                        <div class="head_pic">
                        <img v-if="list.headPic" :src="list.headPic" alt="" />
                        <div class="dengji_and_name">
                            <span v-if="type === 1">我的财富等级</span>
                            <span v-if="type === 2">我的魅力等级</span>
                            <div>{{ list?.levelName }}</div>
                        </div>
                    </div>
                </div>
                <div class="progressBar progress">
                    <div class="progress-bar progress-bar-info active2" :style="'width:' + list.nextLevelPercent + '%'"></div>
                </div>
                <div class="disparity">
                    <span>差 {{ list.nextLevelAmount }} 点{{type === 1?'财富':'魅力'}}值升级至 </span>
                    <span> {{ list.nextLevelName }}</span>
                </div>
                <div class="Strategy" id="header">
                    <img v-if="type === 1" :src="require('@/assets/images/activity/wealth_upgrade_btn@2x.png')" @click="returnTop" />
                    <img v-if="type === 2" :src="require('@/assets/images/activity/charm_upgrade_btn@2x.png')" @click="returnTop" />
                </div>
                </div>
                <div class="icon_dengji">
                    <img v-if="type === 1" :src="list.levelPic" alt="" style="width:38vw;position:absolute;top:0vw" />
                    <img v-if="type === 2" :src="list.levelPic" alt="" style="width:38vw;position:absolute;top:0vw" />
                </div>
            </div>
        </div>
        <div class="Wealthlevel_dengji">
            <div class="center_neirong">
                <div class="left_icon">
                    <img v-if="type === 1" :src="require('@/assets/images/activity/wealth_what_icon@2x.png')" alt="" />
                    <img v-if="type === 1" :src="require('@/assets/images/activity/wealth_how_icon@2x.png')" alt="" />
                    <img v-if="type === 2" :src="require('@/assets/images/activity/charm_what_icon@2x.png')" alt="" />
                    <img v-if="type === 2" :src="require('@/assets/images/activity/charm_how_icon@2x.png')" alt="" />
                </div>
                <div class="right_center">
                    <div class="title_top">
                        <span v-if="type === 1">什么是财富等级?</span>
                        <span class="title_top_2" v-if="type === 2">什么是魅力等级?</span>
                    </div>
                <div class="text_icon">
                    <span v-if="type === 1">财富等级是用户在声贝交友中财力的象征,等级越高,财富称号越厉害!只有在房间中送出礼物,就能提升财富等级</span>
                    <img v-if="type === 1" :src="require('@/assets/images/activity/wealth_heart_img@2x(1).png')" alt="" />
                    <span v-if="type === 1">背包礼物和钻石礼物都可以升级嗷</span>

                    <span v-if="type === 2">魅力等级是用户在声贝交友中魅力的象征,等级越高,魅力称号越厉害!只有在房间中收到礼物,就能提升魅力等级</span>
                    <img class="text_icon_img2" v-if="type === 2" :src="require('@/assets/images/activity/wealth_heart_img@2x(1).png')"
                    alt="" />
                    <span id="text_icon_2" v-if="type === 2">背包礼物和钻石礼物都可以升级嗷</span>
                </div>
                <div class="secondary_title">
                    <span v-if="type === 1">财富等级如何升级?</span>
                    <span class="secondary_title_typr_2" v-if="type === 2">魅力等级如何升级?</span>
                </div>
                <div class="secondary_center">
                    <span v-if="type === 1">每在房间中送出钻石礼物,即可提升财富等级</span>
                    <span v-if="type === 2">每在房间中收到钻石礼物,即可提升魅力等级</span>
                </div>
                    <div :class="type === 1 ? 'upgrade_up' : 'upgrade_up upgrade_up2'">
                        <img :src="require('@/assets/images/activity/wealth_heart_img@2x(1).png')" alt="" />
                        <span>100钻石=1元人民币</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="GradeTable">
            <ul class="level_rich">
                <li class="title">
                    <div>等级图标</div>
                    <div>财富称号</div>
                    <div>财富总值</div>
                </li>
                <li class="center_body" v-for="(item, index) in list.levelList" :key="index">
                    <div>
                        <img :src="item.longIcon" />
                        <!-- <img src="../../public/img2/level_new/charm_long41@2x.png" /> -->
                    </div>
                    <div>{{ item.levelName }}</div>
                    <div>{{ item.amount }}</div>
                </li>
            </ul>
        </div>
        <div class="Exhibition" v-if="type === 1">
            <div class="list_bition">
                <div class="title_top_mistion">财富等级如何展示?</div>
                <div class="two_mistion">除了在个人详情页和房间内的卡片上有展示等级以外,还会在以下情况中展示给大家看哦~</div>
                <div class="span_center_istion">
                    <span>1.财富值从卓越君王起,升级会在房间内出现升级横幅(具体升级规律在下方展示),房间所有人都能看到,快点升级来接受大家的祝贺吧! </span>
                    <span>等级升级横幅出现规律:</span>
                    <span>卓越君王以上每升一级都有全服等级通知</span>
                    <!-- <span>卓越君王-1级,4级,7级,10级;</span> -->
                    <!-- <span>永恒帝皇-1级,3级,5级,7级,9级,10级;</span>
                    <span>至尊幻神-每级提示</span> -->
                </div>
                <img :src="require('@/assets/images/activity/hengfu_img.png')" />
                <div class="two_mistion2">2.财富值的标识还会在房间聊天公屏上直接显示出来,房间所有人都能看到你的尊贵啦~</div>
                <img :src="require('@/assets/images/activity/biaoshi_img.png')" />
                <div class="two_mistion2">3.财富值达到100w财富值时,进房间有进场特效展示</div>
                <img :src="require('@/assets/images/activity/jinchang_img.png')" />
            </div>
        </div>
        <div class="EntryEffect" v-if="type === 1">
            <div class="title_top_cont">
                财富值达到不同值时,进房间不同进场特效展示
            </div>
            <div class="center_body2" v-for="(item, index) in list.levelEntryList" :key="index">
                <div class="icon_dengji2">
                    <img :src="item.longIcon" />
                    <!-- <img src="../../public/img2/level_new/charm_long41@2x.png" /> -->
                </div>
                <div class="icon_texiao2">
                    <div class="room_go">
                        <!-- <img :src="item.longIcon" alt="" />
                        <span>{{ splice_(list.nickName) }}</span>
                        <span>进入了房间</span> -->
                    </div>
                    <img :src="item.goodsImage" />
                    <!-- <img src="../../public/img2/level_new/jinchang_img@2x(1).png" /> -->
                </div>

                <!-- <div class="effects_icon"><img :src="item.longIcon" /></div>
                <div class="Grade_icon"><img :src="item.goodsImage" /></div> -->
                <div class="post_name">{{ item.goodsName }}</div>
            </div>
    </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRoute } from 'vue-router'
import { userLevelPage } from '@/api/activity'
import HeaderComponent from '@/components/header_component/HeaderComponent.vue'
interface List {
    headPic: string,
    levelPic: string,
    height: number,
    levelName?: string,
    nextLevelPercent?: number,
    nextLevelAmount?: string,
    nextLevelName?: string,
    levelList?: Array<any>,
    levelEntryList?: Array<any>
}
export default defineComponent({
    components: {
        HeaderComponent
    },
    setup() {
        const type = ref<number>(1)
        let list = ref<List>({
            headPic: "",
            levelPic: "",
            height: 48,
        })
        let wealthList = {
            data: {
                status: 1,
                result: list.value
            },
        }
        let charmList = {
            data: {
                status: 1,
                result: list.value
            },
        }
        const route: any = useRoute()
        const levepage: (typeArgument: number) => void = async (typeArgument: number) =>  {
            type.value = typeArgument
            const arys = {
                type: typeArgument
            }
            if (typeArgument === 1) {
                if (wealthList.data.status !== 0) {
                    wealthList = await userLevelPage(arys)
                }
                list.value = wealthList.data.result
            } else {
                if (charmList.data.status !== 0) {
                    charmList = await userLevelPage(arys)
                }
                list.value = charmList.data.result
            }
        }
        const returnTop = ():void => {
            const anchor: any = document.querySelector("#header")
            anchor.scrollIntoView({
                behavior: "smooth", // 平滑过渡
                block: "start", // 上边框与视窗顶部平齐
            });
        }
        levepage(type.value)
        return {
            route,
            type,
            list,
            returnTop,
            levepage
        }
    }
})
</script>

<style lang="less" scoped>
@import './LevelNew.less';
</style>